Vue.createApp({
	data(){
		return {
			check:false,//全部全选、取消
		    shoplist: [
		        {
		            shop: 'MEIZU耳机',  // 店铺名
					check:false,
		            list: [
		                {
		                    id: 1,
		                    title: 'MEIZU UR 高端定制耳机',
		                    img: 'images/p1.png',
		                    price: 5800,
		                    num: 1,
							check:false,
		                },
		                {
		                    id: 2,
		                    title: '魅族 POP2 真无线蓝牙耳机',
		                    img: 'images/p6.png',
		                    price: 4800,
		                    num: 1,
							check:false,
		                }
		            ]
		        },
		        {
		            shop: 'MEIZU手机',
					check:false,
		            list: [
		                {
		                    id: 3,
		                    title: '魅族 16Xs',
		                    img: 'images/p2.png',
		                    price: 5800,
		                    num: 1,
							check:false,
		                },
		                {
		                    id: 4,
		                    title: '魅族 16s Pro',
		                    img: 'images/p3.png',
		                    price: 4800,
		                    num: 1,
							check:false,
		                }
		            ]
		        }
		    ]
		}
	},
	computed:{
		total(){  //商品总价件数
			let c=0
			this.shopList.forEach(shop=>{
				shop.list.forEach(goods=>{
					c+=goods.num
				})
			})
			return c
	},
	checkNum(){
		let c=0
		this.shopList.forEach(shop=>{
			shop.list.forEach(goods=>{
				if(goods.check){
					c+=goods.num
				}
			})
		})
		return c
		}
	},
	watch: {
	    shopList: {
	        handler() {
	            // 如果有一个店铺没有勾选，取消全选
	            let not_list = this.shopList.filter(shop => !shop.check);
	            if (not_list.length > 0) {
	                this.check = false;
	            } else {
	                this.check = true;
	            }
	        },
	        deep: true // 深度监听
	    }
	},
	methods:{
		del(i,j){//i店铺的下标 j商品的下标
			if(confirm('确认删除该商品？')){
				if(i>=0){
					//单个删除
				this.shopList[i].list.splice(j,1)
				}else{
					//多项删除
					this.shopList.forEach(shop=>{
						//过滤出没有勾选的商品
						shop.list=shop.list.filter(goods=>!goods.check)
					})
				}
				//删除没有商品的店铺
				this.shopList=this.shopList.filter(shop=>shop.list.length>0)
			}
		},
		shopCheck(i,status){//店铺的全选、取消
		//将该店铺下的所有商品的勾选状态改为和店铺一样
		this.shopList[i].list.forEach(good=>
		goods.check=status
		  })
		},
		allCheck(){//全部店铺商品选中、取消
		this.shopList.forEach(shop=>{
			shop.check=this.check//设置所有店铺
			shop.list.forEach(goods=>{
				goods.check=this.check//设置店铺的商品
			})
		  })
		},
		goodsCheck(i,status){
			if(!status){
				this.shopList[i].check=false
			}else{
				//店铺的未选择的商品为0，表示全选
				let not_list=this.shopList[i].list.filter(goods=>goods.check)
				if(not_list.length == 0)this.shopList[i].check=true
			}
		}
	}
}).mount('table')
